<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    span {
      color: red;
    }
  </style>
</head>
<body>
  QQ号：<input type="text" id="txtQQ"><span></span><br>
  姓名：<input type="text" id="txtName"><span></span><br>
  邮箱：<input type="text" id="txtMail"><span></span><br>
  手机：<input type="text" id="txtPhone"><span></span><br>
  生日：<input type="text" id="txtBirthday"><span></span><br>

  <script>
    // var txtQQ = document.getElementById('txtQQ');
    // txtQQ.onblur = function () {
    //   var regQQ = /^\d{5,11}$/;
    //   if (!regQQ.test(txtQQ.value)) {
    //     this.nextElementSibling.innerHTML = '请输入正确的QQ号码格式';
    //   } else {
    //     this.nextElementSibling.innerHTML = '';
    //   }
    // };

    addCheck('txtQQ', /^\d{5,11}$/, '请输入正确的QQ号码格式');
    addCheck('txtName', /^[\u4e00-\u9fa5]{2,4}$/, '请输入正确的姓名');
    addCheck('txtMail', /^\w+@\w+(\.\w+){1,2}$/, '请输入正确的邮箱格式');
    addCheck('txtPhone', /^\d{11}$/, '请输入正确的手机号码');
    addCheck('txtBirthday', /^\d{4}\-\d{1,2}-\d{1,2}$/, '请输入正确的日期格式');
    
    
    function addCheck(elementId, reg, tip) {
      var element = document.getElementById(elementId);
      element.onblur = function () {
        if (!reg.test(this.value)) {
          this.nextElementSibling.innerHTML = tip;
        } else {
          this.nextElementSibling.innerHTML = '';
        }
      };
    }
  </script>
  
</body>
</html>
